<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骑行，发现生活更美好</title>
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript">
        function computeSize() {
            var rate = ((document.documentElement.clientWidth || document.body.clientWidth) * 100) / 750;
            document.querySelector('html').style.fontSize = rate + 'px'
        }
        computeSize();
        window.addEventListener("resize", computeSize);
    </script>
</head>
<body>
<div id="wrapper" class="lin">
    <div id="topBar">
        <a href="javascript:history.back(-1)">&lt;&nbsp;返回</a>
        <a href="#" id="ok" class="createImg">下一步</a>
        <!-- <a href="#" class="createImg">下一步</a> -->
    </div>
    <div id="img_box" class="one-ge">
        <div class="pic" id="getImg">
            <img id="a" src="../images/123.png" data-id="1" />
            <div id="drop">
                <img src="">
            </div>
        </div>
    </div>
    <div id="filter" class="lin">
        <div class="btm-box">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/car1.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/car2.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/car3.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/car4.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/car1.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/car2.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/car3.png" />
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="imgBox">
                            <img src="../images/car4.png" />
                        </div>
                    </div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
    </div>
    <div id="camera">
        <img src="../images/camera.png">
        <input type="file" name="file_head" id="file_head"  onchange="javascript:setImagePreview();" />
        <!--<input type="file" name="file_head" id="file_head"   />-->
    </div>
    <div id="preview"></div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/swiper.js"></script>
<script src="../js/commin.js"></script>
<script src="../js/dom-to-image.js"></script>
<script src="../js/hammer.js"></script>
<script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: true,
        scrollbarDraggable: false,
        slidesPerView : 4,
        scrollbarSnapOnRelease : true
    });
</script>
</body>
</html>
<script>
//    $('#file_head').on('change',function () {
//        var src=$(this).val();
//        $('#a').attr('src',src)
//    })

    $('.imgBox').click(function () {
        var src=$(this).find('img').attr('src');
        $('#drop').find('img').attr('src',src).parent().show();
    });

    !(function(win,doc){
        var pic=doc.getElementById("drop");
        var mc=new Hammer.Manager(pic);
        var pinch=new Hammer.Pinch();
        var rotate=new Hammer.Rotate();
        var pan=new Hammer.Pan();
        pinch.recognizeWith(rotate);

        mc.add([pinch,rotate,pan]);
        mc.get('pan').set({direction:Hammer.DIRECTION_ALL});

        var pan_ex=pan_ey=rota_ex=pex3=pey3=0,pin_sl=1;
        /**

         * 获取到浏览器窗口的距离

         * @param  {[type]} elm [description]

         * @return {[type]}     [description]

         */
        function getpos(elm){
            var x1=0,y1=0;
            // while(elm.nodeName!="BODY"){

            x1+=elm.offsetLeft;
            y1+=elm.offsetTop;
            elm=elm.offsetParent;
            // }

            return {"x":x1,"y":y1}
        }
        /**获取设置网页宽度

         * [w description]

         * @type {[type]}

         */
            // var w=doc.documentElement.scrollWidth<win.innerWidth?win.innerWidth:doc.documentElement.scrollWidth;

            // var h=doc.documentElement.scrollHeight<win.innerHeight?win.innerHeight:doc.documentElement.scrollHeight;


        var w=$('.pic').width();
        var h=$('.pic').height();
        var getx=getpos(pic).x;
        var gety=getpos(pic).y;
        /**

         * *单指拖动

         * @param  {[type]} ev [description]

         * @return {[type]}    [description]

         */
        mc.on("panmove", function(ev) {
            var pan_mx=ev.deltaX+pan_ex,
                pan_my=ev.deltaY+pan_ey;
            //变大变小之后计算位移防止超过边框

            if(pan_mx<0&&getx-Math.abs(pan_mx-pex3/2)<0){
                pan_mx=-(getx-pex3/2);
            }
            if(pan_mx>0&&(getx+(pan_mx-pex3/2)+pic.offsetWidth)>(w)){
                pan_mx=w-pic.offsetWidth-getx-pex3/2;
            }
            if(pan_my<0&&gety-Math.abs(pan_my-pey3)<0){
                pan_my=-(gety-pey3/2);
            }
            if(pan_my>0&&gety+(pan_my-pey3/2)+pic.offsetHeight>(h)){
                pan_my=h-pic.offsetHeight-gety-pey3/2;
            }

            //设置元素变形值

            pic.style.webkitTransform="translate3d("+pan_mx+"px,"+pan_my+"px,0) scale3d("+pin_sl+","+pin_sl+",1) rotate3d(0,0,1,"+rota_ex+"deg)";
            pic.style.webkitTransformOrigin=(pan_mx+100)+"px "+(pan_my+100)+"px;";

            mc.on("panend", function(ev) {
                pan_ex=pan_mx;
                pan_ey=pan_my;
            });
            ev.preventDefault();
        });
        //双指拉伸旋转

        mc.on("pinchstart rotatestart", function(ev) {
            var pinch_sa=ev.scale;
            var rota_sx=ev.rotation;
            mc.on("pinchmove rotatemove", function(ev) {
                pin_ml=ev.scale-pinch_sa+pin_sl;
                rota_mx=ev.rotation-rota_sx+rota_ex;

                if(pin_ml>1.6){
                    pin_ml=1.6;
                }
                if(pin_ml<1.0){
                    pin_ml=1.0
                }
                pic.style.webkitTransform="translate3d("+pan_ex+"px,"+pan_ey+"px,0) scale3d("+pin_ml+","+pin_ml+",1) rotate3d(0,0,1,"+rota_mx+"deg)";
                mc.on("pinchend rotateend", function(ev){
                    pin_sl=pin_ml;
                    rota_ex=rota_mx;
                    //计算拉伸之后的区间值

                    if(ev.type=="rotateend"){
                        pex3=pin_ml*pic.offsetWidth-(pic.offsetWidth);
                        pey3=pin_ml*pic.offsetHeight-(pic.offsetHeight);
                    }
                });
                ev.preventDefault();
            });
            ev.preventDefault();
        });
    })(window,document)


    $(function(){
        $("#file_head").on("change",function () {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#a");
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

            }
        });
    });

    $('.createImg').click(function(){
        var node = document.getElementById('getImg');
        domtoimage.toPng(node).then(function (dataUrl) {
            // var img = new Image();

            // img.src = dataUrl;

            sessionStorage.setItem("imgurl",dataUrl);
            window.location.href='end.html'
            console.log(dataUrl)
        });

    })
</script>